<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>旅行地图</title>
    <link rel="stylesheet" href="../css/旅行地图.css" />
  </head>
  <body>
    <!-- 全屏固定背景视频 -->
    <div class="background-video">
      <video autoplay muted loop playsinline class="bg-video">
        <source src="../videos/首页视频.mp4" type="video/mp4" />
        <img src="../images/首页背景.jpg" alt="背景图备用" />
      </video>
    </div>

    <!-- 中间纯白内容容器 -->
    <div class="content-container">
      <div class="container">
        <!-- 标题行：左侧返回按钮 + 中间标题（同一行） -->
        <div class="title-container">
          <!-- 返回按钮（小正方形图片） -->
          <div class="back-btn" id="backBtn">
            <img src="../images/返回.png" alt="返回上一页" class="back-img" />
          </div>
          <!-- 大标语区域 -->
          <div class="slogan">
            <h1 class="page-title">你的故事，将在何处书写？</h1>
          </div>
        </div>

        <!-- 输入框 + 按钮区域（水平排列） -->
        <div class="input-section">
          <input
            type="text"
            id="placeInput"
            placeholder="输入地点（如：敦煌莫高窟）"
          />
          <!-- 新增查找按钮 -->
          <button id="searchBtn">查找</button>
          <button id="confirmBtn">确定</button>
        </div>

        <!-- 图片容器区域 -->
        <div class="image-container" id="imageContainer">
          <!-- 初始提示文字 -->
        </div>
      </div>
    </div>

    <script src="../js/旅行地图.js"></script>
  </body>
</html>
